<template>
	<om-page :title="pageTitle">
		<uni-search-bar
			bgColorCls="bg-steelblue" 
			cancelColor="text-white"
			 :focus="focus" 
			 placeholder="请输入姓名" 
			 @confirm="confirm" 
			 @input="confirm"></uni-search-bar>
	  <view class="page__bd">
	    <uni-list>
	    	<view v-for="(item, index) in commonData.datas" :key="index">
	    		<uni-list-item 
	    				:showArrow="false" 
	    				:avatar="index + 1"
	    				:avatarBgColor="getAvatarBgColor(index)"
	    				:title="item.userName" 
	    				:note="item.instName?item.instName:''">
	    					<view slot="footer">
	    					  <view v-if="item.unAttendTimes">
	    					    <view class="footer-cls">未考勤次数:{{item.unAttendTimes}}</view>
	    					  </view>
	    					  <view v-if="item.lateTimes">
	    					    <view class="footer-cls">迟到次数:{{item.lateTimes}}</view>
	    					  </view>
	    					  <view v-if="item.earlyTimes">
	    					    <view class="footer-cls">早退次数:{{item.earlyTimes}}</view>
	    					  </view>
	    					</view>
	    				</uni-list-item>
	    	</view>
	    </uni-list>
	  </view>
	</om-page>
</template>

<script>
	import listLoad from '../../../static/js/listLoad.js';
	export default {
		data() {
			return {
				url:'wxAttend/getAttendExOrderList',
				scrollTop: 0,
				commonData: {
					datas:[],
					query:{
						searchStr:'',
						dateStr:''
					}
				},
				pageTitle:"",
				focus:false
			}
		},
		created: function () {
		  this.initData = this._.debounce(this.initData, 300)
		},
		methods: {
			confirm(e){
				if(!this.commonData.query.dateStr){
					this.om.toast('日期为空')
					return
				}
				if (e && e.value) {
				  if (!this.commonData.query.searchStr || (this.commonData.query.searchStr && this.commonData.query.searchStr != e.value.trim())) {
					this.commonData.query.searchStr = e.value.trim()
					this.initData()
				  }
				} else {
					this.commonData.datas= []
				}
			},
			initData(){
				listLoad.initData(this,this.url)
			},
			getAvatarBgColor(index){
				if(index < 3){
					return this.ColorList[index].name
				}
				if(index < 10){
					return this.ColorList[3].name
				}
				return this.ColorList[4].name
			}
		},
		onLoad(options) {
			 let date = options.date
			if (!date) {
			  this.om.toast("没有找到日期参数！")
			  return
			}
			let _that = this
			this.pageTitle = "搜索("+date+")"
			uni.setNavigationBarTitle({
			  title: this.pageTitle
			})
			_that.commonData.query.dateStr = date
			this.$nextTick(function(){
				this.focus = true
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			listLoad.pullDownRefresh(this);
		},
		
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			listLoad.reachBottom(this);
		}
	}
</script>

<style>

</style>
